<template>
    <LeftRightLayoutContainer type="right">
        <template #default>
            <div class="panel-big-title">督察执法</div>
            <SupervisionAndLawEnforcement style="margin-bottom: 16px" />
            <div class="panel-big-title">绿色增长</div>
            <div class="flex-container" style="height: 224px; margin-bottom: 16px">
                <EnvService />
                <ThirdPartyServiceOrg />
                <CarbonEmission />
            </div>
            <div class="panel-big-title">美丽杭州建设</div>
            <div class="felx-container-2">
                <EcologyPanel />
                <DemoCreation />
                <SpecialFunZone />
                <BeautifulHangzhouElement />
            </div>
        </template>
    </LeftRightLayoutContainer>
</template>

<script setup lang="ts">
import SupervisionAndLawEnforcement from './panel/SupervisionAndLawEnforcement.vue'
import EnvService from './panel/EnvService.vue'
import ThirdPartyServiceOrg from './panel/ThirdPartyServiceOrg.vue'
import CarbonEmission from './panel/CarbonEmission.vue'
import EcologyPanel from './panel/EcologyPanel.vue'
import DemoCreation from './panel/DemoCreation.vue'
import SpecialFunZone from './panel/SpecialFunZone.vue'
import BeautifulHangzhouElement from './panel/BeautifulHangzhouElement.vue'
import LeftRightLayoutContainer from '@/components/LeftRightLayoutContainer/index.vue'
</script>

<style lang="scss" scoped>
.flex-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.felx-container-2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 16px;
}
</style>
